<template>
	<view>
		<view class="fk-title">
			<view style="color: #fa4016;">*</view> 反馈类型
		</view>
		<view class="fk-type">
			<view class="tabs-type" :class="[currentId==item.id?'active' :'']" v-for="item in tabsList" :key="item.id"
				@click="tabsChang(item)">{{item.name}}</view>
		</view>
		<view class="fk-desc">
			<view class="fk-title">
				<view style="color: #fa4016;">*</view> 反馈描述
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="params.description" placeholder="请输入反馈描述"></u--textarea>
			</view>
		</view>
		<view class="fk-desc">
			<view class="bx-title" style="margin-top: 2rpx; padding-top: 60rpx;">
				<view class="left">
					<!-- <view style="color: red;">*</view> -->
					问题照片<view style="color: #8c8c8c;">(可传3张)</view>
				</view>
			</view>
			<view class="bx-upload">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="3" previewFullImage="true"></u-upload>
			</view>
		</view>
		<view class="fx-title">
			<view class="left">联系方式</view>
			<view class="right">
				<u-input placeholder="请输入联系方式" inputAlign="right" border="none" v-model="params.linkTel"></u-input>
			</view>
		</view>
		<view class="cofirm-btn">
			<view class="tj-btn" @click="comfirfeedback">提交</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config';
	import utils from '@/util/util.js'
	export default {
		data() {
			return {
				fileList1: [],
				currentId: 0,
				tabsList: [{
						id: 1,
						name: "功能异常"
					},
					{
						id: 2,
						name: "功能建议"
					},
					{
						id: 3,
						name: "其他问题"
					}
				],
				params: {
					type: '',
					description: '',
					linkTel: '',
					pictures: ''
				}
			}
		},
		methods: {
			tabsChang(item) {
				this.currentId = item.id;
				this.params.type = item.id;
			},
			comfirfeedback() {
				var that = this;
				if (!that.params.type) {
					uni.$u.toast('请选择反馈类型！')
					return
				}
				if (!that.params.description) {
					uni.$u.toast('请输入反馈描述！')
					return
				}
				if(that.params.linkTel){
					if(!utils.isTelephone(that.params.linkTel)){
						uni.$u.toast('请输入正确的联系方式！')
						return
					}
				}
				that.params.pictures="";
				if(that.fileList1.length>0){
					let arry=[]
					that.fileList1.map(item=>{
						arry.push(item.url)
					})
					that.params.pictures= arry.toString()
				}
				console.log('提交参数---',that.params)
				uni.$u.http.post(`/system/mobile/sysFeedback/addFeedback`,
					that.params).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(()=>{
						    uni.navigateBack({delta: 1})
						},1000)
						
					}
				
				}).catch(err => {})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log('event===>',event)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log('result===>',result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log('上传图片集合===>',this.fileList1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:  config.baseUrl + '/base/upload/uploadFile',
						filePath: url,
						name: 'file',
						formData: {
							type: 12,
							file: url
						},
						header: {
							// #ifdef MP
							"Content-Type": "multipart/form-data",
							// #endif
							"API-User-Token": uni.getStorageSync('userInfo').token
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							setTimeout(() => {
								resolve(res.data.fileIds[0])
							}, 500)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.fk-title {
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx 20rpx 20rpx;
		font-size: 34rpx;
		color: #000000;
	}

	.fk-type {
		background: #ffffff;
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;

		.tabs-type {
			font-size: 28rpx;
			font-weight: 400;
			border-radius: 8rpx;

			color: #2b2b2b;
			background: #f2f2f2;
			padding: 4rpx 10rpx;
			margin-left: 30rpx;
		}

		.active {
			color: #ffffff;
			background: #0F53AC;
		}
	}

	.fk-desc {
		margin-top: 2rpx;
		background: #ffffff;
		padding-bottom: 20rpx;

		.input-textrea {
			margin: 0 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

		.bx-title {
			background: #fff;
			padding: 20rpx;

			.left {
				display: flex;
				font-size: 34rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);
				background: #fff;
			}
		}

		.bx-upload {
			padding: 20rpx 30rpx;
			background: #fff;
		}
	}

	.fx-title {
		background: #ffffff;
		padding: 30rpx 20rpx;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 34rpx;
		padding-right: 30rpx;

	}

	.cofirm-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;

		.tj-btn {
			width: 90%;
			border-radius: 12rpx;
			background: #0F53AC;
			text-align: center;
			color: #ffffff;
			font-size: 34rpx;
			padding: 24rpx 0;
		}
	}
</style>
